<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/tduck/login/2.png"></image>
		<image class="img-b" src="/static/tduck/login/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">欢迎使用系统</view>
		<form class="cl">
			<view class="t-a">
				<image src="/static/tduck/login/sj.png"></image>
				<view class="line"></view>
				<input name="username" placeholder="请输入账号" v-model="username"/>
			</view>
			<view class="t-a">
				<image src="/static/tduck/login/yz.png"></image>
				<view class="line"></view>
				<input :password="showPassword" name="password" placeholder="请输入密码" v-model="password"/>
				<u-icon class="pwd-icon" :class="[!showPassword ? 'pwd-icon-active' : '']" size="50" name="eye"
						@click="changePassword"></u-icon>
			</view>
			<view class="register-login">
				<text class="register" @tap="register()" v-if="isShowRegister">新用户？注册</text>
				<button class="login" @tap="login()">登 录</button>
			</view>
		</form>
		<view class="wechat-login" v-if="isShowWxLogin">
			<u-icon name="weixin-circle-fill" color="#28c445" size="90" @tap="$u.debounce(wechatLogin,1000)"></u-icon>
		</view>
		<u-modal v-model="show" :content="content" :show-cancel-button=true :cancel-text="canceltext"
				:confirm-text='confirmtext' @confirm="confirm"></u-modal>
		<update-account ref="updateAccountRef" @next="loginSuccess"/>
	</view>
</template>
<script>
import UpdateAccount from './UpdateAccount'
import {getTabBarList, tabBarList} from "../../utils/tabbar";

export default {
	components: {UpdateAccount},
	data() {
		return {
			title: getApp().globalData.systemName || '欢迎回来', //填写logo或者app名称，也可以用：欢迎回来，看您需求
			username: '', //账号
			password: '', //密码
			isShowRegister: getApp().globalData.enableRegister,
			isShowWxLogin: getApp().globalData.enableWxLogin,
			show: false,
			content: '如果您以有账号建议使用账号登录再进行微信绑定',
			canceltext: "使用账号登录",
			confirmtext: '使用微信登录',
			showPassword: true,
			redirect: '',
			params: ''
		};
	},
	mounted() {
		console.log(getApp().globalData)
	},
	onLoad(options) {
		this.handleAuthorize()
		this.redirect = options.redirect ? decodeURIComponent(options.redirect) : ''
		this.params = options.params ? decodeURIComponent(options.params) : ''
	},
	methods: {
		// authorize
		handleAuthorize(){
			//路由跳转到浏览器
			const codeUrl = window.location.href.split('code=')[1] || ''
			const code = codeUrl.split('&')[0]
			if (!code){
				const redirect_uri = window.location.href
				const url = `https://api.campushoy.com/connect/oauth2/authorize?response_type=code&client_id=17446191948331083&scope=basic_info&state=token&redirect_uri=${redirect_uri}`
				console.log(url)
				window.location.href = url
				return
			}
			console.log(code);

			this.$u.api.loginOauth({
				code: code
			}).then(res => {
				console.log(res,888);

				// return
				
				this.$u.toast('登录成功');
				uni.$u.vuex('vuex_token', res.token);
				uni.$u.vuex('vuex_openid', res.openId)
				if (res.user) {
					uni.$u.vuex('vuex_user', res.user);
				}
				this.loginSuccess()
			}).catch(err => {
				if (err.code == 500 && err.msg == 'code失效') {
					const redirect_uri = window.location.href.split('?code=')[0]
					const url = `https://api.campushoy.com/connect/oauth2/authorize?response_type=code&client_id=17446191948331083&scope=basic_info&state=token&redirect_uri=${redirect_uri}`
					window.location.href = url
				}
			});
		},
		//当前登录按钮操作
		login() {
			let that = this;
			if (!that.username) {
				this.$u.toast('请输入账号');
				return;
			}
			if (!that.password) {
				this.$u.toast('请输入密码');
				return;
			}
			this.$u.api.login({
				username: this.username,
				password: this.password
			}).then(res => {
				this.$u.toast('登录成功');
				uni.$u.vuex('vuex_token', res.token);
				uni.$u.vuex('vuex_openid', res.openId)
				if (res.user) {
					uni.$u.vuex('vuex_user', res.user);
				}
				this.loginSuccess()
			});
		},
		loginSuccess() {
			// 获取tabbar
			this.$u.api.getPortal().then(res => {
				const tabs = getTabBarList(res)
				uni.$u.vuex('vuex_tabbar', getTabBarList(res));
				console.log(this.redirect, 'redirect')
				let url = this.redirect

				console.log(res,78787);
				console.log(tabs, '获取tabbar');
				
				// return
				if (!url) {
					url = '/#' + tabs[0]?.pagePath || 'pages/me/index'
				}
				// console.log(url,898989);
				
				if (this.params) {
					url = url + this.$u.queryParams(JSON.parse(this.params))
				}
						console.log(url,898989);
						// h5 跳转
						window.location.href = url
						return
				uni.reLaunch({
					url: url,
					fail: (res) => {
						console.log(res)
					}
				});
			})

		},
		changePassword() {
			this.showPassword = !this.showPassword
		},
		register() {
			this.$u.route({
				url: '/pages/user/register',
			})
		},
		confirm() {
			let that = this;
			uni.showLoading({
				title: '登录中'
			});
			uni.login({
				"provider": "weixin",
				success: function (event) {
					const {
						code
					} = event
					//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
					that.$u.api.watchLogin({
						code: event.code
					}).then(res => {
						that.$u.toast('登录成功');
						uni.$u.vuex('vuex_token', res.token);
						uni.$u.vuex('vuex_openid', res.openId)
						if (res.user) {
							uni.$u.vuex('vuex_user', res.user);
						}
						uni.hideLoading()
						if (!res.isModified) {
							that.$refs.updateAccountRef.showPopup(res.user)
						} else {
							that.loginSuccess()
						}
					})
				},
				fail: function (err) {
					// 登录授权失败
					// err.code是错误码
				}
			})
		},
		wechatLogin() {
			if (!uni.getStorageSync("confirmWxLogin")) {
				this.show = true
			} else {
				this.confirm()
			}
			uni.setStorage({
				key: "confirmWxLogin",
				data: 'true',
				success: function () {
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.register-login {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login {
	width: 100%;
	margin-top: 10rpx;
}

.register {
	color: $u-type-primary;
	margin-bottom: 20rpx;
}

.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
}

.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	/* margin-bottom: -200rpx; */
}

.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: $u-type-primary;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	/* border-right: 2rpx solid #dedede; */
	margin-right: 20rpx;
	z-index: 10;
}

.t-login .t-a .line {
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	padding: 300rpx 0 30rpx 0;
	font-weight: bold;
	z-index: 9999;
	position: relative;
}

.t-login .t-b2 {
	text-align: left;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 120rpx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: $u-type-primary;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.pwd-icon {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	z-index: 9999;
}

.pwd-icon-active {
	color: $u-type-primary;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 200rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.wechat-login {
	display: flex;
	justify-content: center;
	margin-top: 180rpx;
}
</style>
